<template>
  <a-dropdown :trigger="['click']" v-model="dropdownvisible">
    <span class="color-picker" :class="{disabled:disabled}" :style="{backgroundColor: colors || colors.hex}">
      <a-icon @click.stop="handleOpen" :type="colors?'down':'close'" class="color-picker-icon" />
      <!-- <a-icon v-else @click.stop="handleOpen" type="down" class="color-picker-icon" /> -->
    </span>
    <a-menu slot="overlay">
      <a-menu-item key="1">
        <chrome-picker  placeholder="请输入" v-model.trim="colors" />
        <div class="text-right mt-1">
          <a-button @click="handleCancel" type="link" size="small" class="mr-1">
            取消
          </a-button>
          <a-button @click="handleOk" size="small">
            确认
          </a-button>
        </div>
      </a-menu-item>
    </a-menu>
  </a-dropdown>
</template>
<script>
import { Chrome } from 'vue-color'
export default {
  name: 'ZColorPicker',
  components: {
    'chrome-picker': Chrome
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      required: false,
      type: String,
      default: ''
    },
    disabled: Boolean,
    colorType: {
      type: String,
      default: 'hex'
    }
  },
  data() {
    return {
      colors: '',
      dropdownvisible: false
    }
  },
  watch: {
    value: {
      handler(val, oldValue) {
        this.colors = val
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    handleOk() {
      this.dropdownvisible = false
      this.$emit('change', this.colors[this.colorType])
    },
    handleCancel() {
      this.dropdownvisible = false
      this.colors = ''
      this.$emit('change', '')
    },
    handleOpen() {
      if (!this.disabled) {
        this.dropdownvisible = !this.dropdownvisible
      }
    }
  }
}
</script>
<style scoped lang="less">
  .color-picker{
    display:inline-block;
    width:30px;
    height:30px;
    border: 1px solid @border-color-base;
    border-radius: 4px;
    text-align: center;
    line-height: 30px;
    .color-picker-icon{
      color: @border-color-base;
    }
  }
  .disabled{
    cursor:no-drop !important;
  }
</style>
